import {
  getBomReviewByPage,
  addBomReview,
  updateBomReview,
  delBomReview,
  exportBomReview,
  confirmBomReview,
  getBomReviewMainByPage,
  confirmBomReviewVersion2,
} from '@/services/design/bomReview';
import { tableSearchPublicConfig } from '@/utils/filterUtils';
import { PlusOutlined } from '@ant-design/icons';
import { Ellipsis } from '@/components/Ellipsis';
import dayjs from '@/components/dayjs';
import '@/pages/design/style.less';
import type { tabType } from '@/pages/product/components/interfaceProduct';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import {
  Button,
  Form,
  Input,
  message,
  Modal,
  Tree,
  Row,
  Col,
  Select,
  Tabs,
  InputNumber,
  notification,
} from 'antd';
import { sortTran, filterTran, filterTranNew } from '@/utils/requestUtil';
import React, { useEffect, useRef, useState } from 'react';
import { ModalForm, ProFormText, recordKeyToString } from '@ant-design/pro-components';
import { history, useModel } from 'umi';
const BomReview: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  const actionRef1 = useRef<ActionType>();
  const [modalVisit, setModalVisit] = useState(false); // 新建和编辑提示框
  const [modalVisit2, setModalVisit2] = useState(false); // 新建和编辑提示框
  const [confirmLoading, setConfirmLoading] = useState(false); //编辑框的disable
  const [formTitle, setFormTitle] = useState('审核'); //
  const [createOrUpdate, setCreateOrUpdate] = useState(false); //编辑框的disable
  const [state, setstate] = useState('');
  const [form] = Form.useForm();
  const ref = useRef(null);
  const [confirmRecord, setConfirmRecord] = useState({}); //暂时存储要审核的内容
  const [tempReviewState, setTempReviewState] = useState(); //暂时存储选择的
  const [editVersion, setEditVersion] = useState(false); //用于判断是否可以手动修改版本
  const [handlenumber, sethandlenumber] = useState(''); //待审批的数量
  const [selectedRowId, setSelectedRowId] = useState<string[]>([]); //勾选后需要导出的内容
  let reviewMainId: string;
  const dateFormat = 'YYYY-MM-DD';

  const { initialState } = useModel('@@initialState'); //hooks获取全局的共享的当前用户信息
  const [userRole, setUserRole] = useState<string[]>(); //当前用户的身份

  useEffect(() => {
    try {
      if (!initialState?.currentUser) {
        history.replace('/user/login');
        notification.error({
          message: '获取用户信息失败',
          description: '获取用户信息失败，将跳回到登录页面',
        });
        throw new Error('获取用户信息失败');
      }
      console.log('initialState', initialState);
      setUserRole(initialState.roleInfo);
    } catch (err) {
      console.log(err);
    }
  }, []);

  const columns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 50,
    },
    {
      title: '项目名称',
      dataIndex: 'projectName',
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '柜体编号',
      dataIndex: 'productCode',
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: 'BOM编号',
      dataIndex: 'bomCode',
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    // {
    //   title: 'BOM行号',
    //   dataIndex: 'bomSequence',
    //   render: (text) => <>{Ellipsis(text)}</>,
    // },
    {
      title: '变更状态',
      dataIndex: 'changeStatus',
      align: 'center',
      sorter: true,
      width: 100,
      render: (text, record, _, action) => {
        return (
          <div>
            {record.changeStatus == 0 ? '待审核' : record.changeStatus == 2 ? '审核通过' : '已驳回'}
          </div>
        );
      },
      search: false,
    },
    {
      title: '审核描述',
      dataIndex: 'memo',
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
      search: false,
    },
    /*     {
      title: '变更是否成功',
      dataIndex: 'changeSuccess',
      hideInTable: true,
      width: 115,
      align: 'center',
      sorter: true,
      render: (text, record, _, action) => {
        return <div>{record.changeSuccess == 1 ? '是' : '否'}</div>;
      },
      valueType: 'select',
      request: async () => [
        { label: '是', value: 1 },
        { label: '否', value: 0 },
      ],
    }, */
    {
      title: '申请人',
      dataIndex: 'userName',
      align: 'center',
      sorter: true,
      width: 100,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '版本',
      dataIndex: 'version',

      width: 80,
      align: 'center',
      sorter: true,
      valueType: 'digit',
      render: (text, record, _, action) => {
        return (
          <div>
            v{record.version}.{record.versionSecond}
          </div>
        );
      },
    },
    /*         {
          title: '物料编号',
          dataIndex: 'materialCode',
          
          width: 130,
         align: 'center',sorter: true, 
          render: (text) => <>{Ellipsis(text)}</>,
        },
        {
          title: '物料名称',
          dataIndex: 'materialName',
          
          width: 130,
         align: 'center',sorter: true, 
          render: (text) => <>{Ellipsis(text)}</>,
        },
        {
          title: '物料规格',
          dataIndex: 'materialSpec',
          
          width: 110,
         align: 'center',sorter: true, 
          render: (text) => <>{Ellipsis(text)}</>,
        },
        {
          title: '数量',
          dataIndex: 'materialQty',
          
          width: 80,
         align: 'center',sorter: true, 
          valueType: 'digit',
          render: (text) => <>{Ellipsis(text)}</>,
        },
        {
          title: '单位',
          dataIndex: 'unit',
          
          width: 80,
         align: 'center',sorter: true, 
          render: (text) => <>{Ellipsis(text)}</>,
        },
        {
          title: '位置号',
          dataIndex: 'positionNo',
          
          width: 100,
         align: 'center',sorter: true, 
          render: (text) => <>{Ellipsis(text)}</>,
        },
        {
          title: '物料品牌',
          dataIndex: 'brand',
          
         align: 'center',sorter: true, 
          render: (text) => <>{Ellipsis(text)}</>,
        },
        {
          title: '物料分类',
          dataIndex: 'materialClassification',
          
         align: 'center',sorter: true, 
          render: (text) => <>{Ellipsis(text)}</>,
        },
        {
          title: '物料种类',
          dataIndex: 'materialType',
          
         align: 'center',sorter: true, 
          render: (text) => <>{Ellipsis(text)}</>,
        },
        {
          title: '是否甲供料',
          dataIndex: 'isJia',
          
          width: 110,
         align: 'center',sorter: true, 
          render: (text) => <>{Ellipsis(text)}</>,
          valueType: "select",
          request: async () => [
            { label: "是", value: "是" },
            { label: "否", value: "否" },
          ],
        },
        {
          title: '产品/柜体编号',
          dataIndex: 'productCode',
          
          width: 210,
         align: 'center',sorter: true, 
          render: (text) => <>{Ellipsis(text)}</>,
        },
        {
          title: '是否最高版本',
          dataIndex: 'isMax',
          
          // hideInTable: true,
          width: 115,
          search: false,
         align: 'center',sorter: true, 
          render: (text, record, _, action) => {
            return <div>{record.isMax == 1 ? '是' : '否'}</div>;
          },
        }, */
    {
      title: '创建日期', //表头显示的名称
      search: false,
      dataIndex: 'createTime',

      align: 'center',
      sorter: true,
      render: (text, record, _, action) => {
        return dayjs(record.createTime).format(dateFormat);
      },
    },
    /*     {
      title: '创建人', //表头显示的名称
      search: false,
      dataIndex: 'createName',
      hideInTable: true,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    }, */
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      width: 100,
      render: (text, record, _, action) => [
        <a
          key="editKey"
          hidden={
            record.changeStatus === 0 &&
            !userRole?.includes('ROLE_TechManager') &&
            !userRole?.includes('ROLE_Admin')
          }
          onClick={() => {
            setstate(record.changeStatus);
            if (record.changeStatus == 0) {
              setModalVisit(true);
              setCreateOrUpdate(true);
              setFormTitle('审核');
            } else {
              setModalVisit2(true);
            }
            setConfirmRecord(record);
            form.setFieldsValue({
              bomBeforeId: record.bomBeforeId,
              bomCode: record.bomCode,
              bomSequence: record.bomSequence,
              brand: record.brand,
              changeStatus: record.changeStatus,
              changeSuccess: record.changeSuccess,
              isJia: record.isJia,
              isMax: record.isMax,
              materialClassification: record.materialClassification,
              materialCode: record.materialCode,
              materialName: record.materialName,
              materialQty: record.materialQty,
              materialSpec: record.materialSpec,
              materialType: record.materialType,
              positionNo: record.positionNo,
              productCode: record.productCode,
              projectName: record.projectName,
              unit: record.unit,
              userId: record.userId,
              userName: record.userName,
              version: record.version,
              versionSecond: record.versionSecond,
              id: record.id,
              reviewMemo: record.memo,
              reviewState:
                record.changeStatus == 0 ? '' : record.changeStatus == 2 ? '审核通过' : '已驳回',
            });
          }}
        >
          {record.changeStatus == 0 ? '审批' : '查看'}
        </a>,
      ],
    },
  ];

  const columns1: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 50,
    },
    {
      title: '变更状态',
      dataIndex: 'changeStatus',
      align: 'center',
      sorter: true,
      /*       render: (text, record, _, action) => {
            return <div>{record.changeStatus === 0 ? '未变更' : record.changeStatus === 1 ? '已变更' : '已新增'}</div>;
          }, */
      render: (text, record, _, action) => {
        let color = 'status-color-white base-status';
        let word = '原始';
        if (text === 1) {
          color = 'status-color-yellow base-status';
          word = '变更';
        } else if (text === 2) {
          color = 'status-color-green base-status';
          word = '新增';
        }
        return <div className={color}></div>;
      },
    },
    {
      title: '物料编号',
      dataIndex: 'materialCode',
      width: 130,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '物料名称',
      dataIndex: 'materialName',
      width: 130,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '物料规格',
      dataIndex: 'materialSpec',
      width: 110,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '数量',
      dataIndex: 'materialQty',
      width: 80,
      align: 'center',
      sorter: true,
      valueType: 'digit',
      render: (text, record) => {
        if (record.changeStatus === 1) {
          return (
            <div
              style={{
                display: 'flex',
                alignContent: 'center',
                justifyContent: 'center',
                width: '100%',
                height: '100%',
              }}
            >
              <p style={{ color: 'red', margin: 'auto' }}>{record.preMaterialQty}</p> →{' '}
              <p style={{ color: 'green', margin: 'auto' }}>{text}</p>
            </div>
          );
        } else {
          return <div>{text}</div>;
        }
      },
    },
    {
      title: '单位',
      dataIndex: 'unit',
      width: 80,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '位置号',
      dataIndex: 'positionNo',
      width: 100,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '物料品牌',
      dataIndex: 'brand',
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '物料分类',
      dataIndex: 'materialClassification',
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '物料种类',
      dataIndex: 'materialType',
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '是否甲供料',
      dataIndex: 'isJia',
      width: 100,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
      valueType: 'select',
      request: async () => [
        { label: '是', value: '是' },
        { label: '否', value: '否' },
      ],
    },
    {
      title: '产品/柜体编号',
      dataIndex: 'productCode',
      width: 210,
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '是否最高版本',
      dataIndex: 'isMax',
      // hideInTable: true,
      width: 100,
      search: false,
      align: 'center',
      sorter: true,
      render: (text, record, _, action) => {
        return <div>{record.isMax == 1 ? '是' : '否'}</div>;
      },
    },
    {
      title: '创建日期', //表头显示的名称
      search: false,
      dataIndex: 'createTime',
      align: 'center',
      sorter: true,
      render: (text, record, _, action) => {
        return dayjs(record.createTime).format(dateFormat);
      },
    },
    {
      title: '创建人', //表头显示的名称
      search: false,
      dataIndex: 'createName',
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
  ];

  //审批
  const handleSubmit = async () => {
    setConfirmLoading(true);
    form
      .validateFields()
      .then(async () => {
        const res = { ...form.getFieldsValue() };
        console.log(confirmRecord);
        console.log(res, 'res');
        res.version_pre = confirmRecord.version;
        res.versionSecond_pre = confirmRecord.versionSecond;
        const result = await confirmBomReviewVersion2(res);
        if (result.code === 0) {
          message.success('审核成功');
          form.resetFields();
        }
        console.log(res);
        setConfirmLoading(false);
        setModalVisit(false);
        actionRef.current!.reload();
        reviewMainId = '';
        console.log(reviewMainId);
        actionRef1.current!.reload(); //刷新子表
      })
      .catch(() => {
        setConfirmLoading(false);
      });
  };

  function ClassifyResult(result) {
    const newResult = result.map((r) => {
      if (r.bomBeforeId === null) {
        r.changeStatus = 2; //没有bomBeforeId则是新增
      } else {
        r.changeStatus = 1; //有bomBeforeId则是变更
      }
      return r;
    });
    return newResult;
  }

  const rowSelection = {
    onChange:(selectedRowKeys: any,selectedRows: any) => {
      setSelectedRowId(selectedRowKeys);
    }
  }

  //定义Tabs的子结构的数组
  const tabList: tabType[] = [
    {
      name: 'tab1',
      label: '待审批',
      content: (
        <div>
          <ProTable
            headerTitle="BOM审批查询"
            actionRef={actionRef} //用于触发刷新操作等，看api
            rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
            formRef={ref}
            // search={{
            //   labelWidth: 100,
            //   defaultCollapsed: true,
            // }}
            search={tableSearchPublicConfig}
            onRow={(record) => ({
              onClick: () => {
                reviewMainId = record.id;
                actionRef1.current!.reload(); //刷新子表
              },
            })}
            toolBarRender={(action, { selectedRows }) => [
              // <Button
              //   key="button"
              //   icon={<PlusOutlined />}
              //   onClick={() => {
              //       setCreateOrUpdate(false);
              //       setFormTitle('新建');
              //       form.resetFields();
              //       setModalVisit(true);
              //   }}
              //   type="primary"
              //   >
              //   新建
              // </Button>,
/*               <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                  const filter_ref = { changeStatus: 0 };
                  const filters = filterTranNew(filter_ref);
                  if(selectedRowId.length === 0){
                    message.error('请勾选需要导出的内容');
                    return;
                  }
                  selectedRowId?.map((item:string) => {
                    let tempFilter = {
                      andOr: 'and',
                      field: 'id',
                      operator: 'eq',
                      value: item,
                    }
                    filters.push(tempFilter);
                  })
                  console.log(filters);
                  exportBomReview({
                    current: 1,
                    pageSize: 5000,
                    filters: filters,
                  }).then((res) => {
                    const aLink = document.createElement('a');
                    document.body.appendChild(aLink);
                    aLink.style.display = 'none';
                    aLink.href = window.URL.createObjectURL(res);
                    aLink.setAttribute('download', `BomReview.xls`);
                    aLink.click();
                    document.body.removeChild(aLink);
                  });
                }}
                type="primary"
              >
                导出
              </Button>, */
            ]}
            request={async (params = {}, sort, filter) => {
              const res = { ...params, changeStatus: 0 };
              const sorters = sortTran(sort);
              const filters = filterTranNew(res);
              // result:当前页面结果，result_nofilter：当前页面数据数量
              const [result, result_nofilter] = await Promise.all([
                getBomReviewMainByPage({
                  ...params,
                  sorters: sorters,
                  filters: filters,
                }),
                getBomReviewMainByPage({
                  ...params,
                  sorters: sorters,
                  filters: [{
                    field: "changeStatus",
                    operator: "eq",
                    value: 0,
                    andOr: "and"
                  }]
                }),
              ]);
              sethandlenumber(result_nofilter.data.totalElements);
              // console.log(result);
              result.data.content.map((r) => {
                if (r.versionSecond === null) {
                  r.versionSecond = 0; //如果versionSecond为null，则次版本号赋为0
                }
                return r;
              });
              //const result = await getBomReviewByPage({ ...params, sorters: sorters, filters: filters });
              // console.log(result.data.content);
              return {
                data: result.data.content,
                total: result.data.totalElements,
                success: result.success,
              };
            }}
            columns={columns.filter(function (item) {
              return item.dataIndex != 'memo';
            })}
            scroll={{ x: 1000, y: 350 }}
            rowSelection={rowSelection}
          />
          <ProTable
            headerTitle="BOM详情"
            actionRef={actionRef1} //用于触发刷新操作等，看api
            rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
            search={false}
            toolBarRender={(action, { selectedRows }) => [
              <div className="projectScheduleGroup">
                <span>原始：</span>
                <img src="../wks.gif" />
                <span>新增：</span>
                <img src="../zxz.gif" />
                <span>变更：</span>
                <img src="../zt.gif" />
              </div>,
            ]}
            request={async (params = {}, sort, filter) => {
              let result;
              if (reviewMainId) {
                const filters = [
                  {
                    andOr: 'and',
                    field: 'reviewMainId',
                    operator: 'eq',
                    value: reviewMainId,
                  },
                ];
                result = await getBomReviewByPage({
                  ...params,
                  sorters: [],
                  filters: filters,
                });
                result.data.content = ClassifyResult(result.data.content);
              }
              return {
                data: result.data.content,
                total: result.data.totalElements,
                success: result.success,
              };
            }}
            columns={columns1}
            scroll={{ x: 2200, y: 350 }}
          />
        </div>
      ),
    },
    {
      name: 'tab2',
      label: '已通过',
      content: (
        <div>
          <ProTable
            headerTitle="BOM审批查询"
            actionRef={actionRef} //用于触发刷新操作等，看api
            rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
            formRef={ref}
            // search={{
            //   labelWidth: 100,
            //   defaultCollapsed: true,
            // }}
            search={tableSearchPublicConfig}
            onRow={(record) => ({
              onClick: () => {
                reviewMainId = record.id;
                actionRef1.current!.reload(); //刷新子表
              },
            })}
            toolBarRender={(action, { selectedRows }) => [
              // <Button
              //   key="button"
              //   icon={<PlusOutlined />}
              //   onClick={() => {
              //       setCreateOrUpdate(false);
              //       setFormTitle('新建');
              //       form.resetFields();
              //       setModalVisit(true);
              //   }}
              //   type="primary"
              //   >
              //   新建
              // </Button>,
/*               <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                  const filter_ref = { changeStatus: 2 };
                  const filters = filterTranNew(filter_ref);
                  exportBomReview({
                    current: 1,
                    pageSize: 5000,
                    filters: filters,
                  }).then((res) => {
                    const aLink = document.createElement('a');
                    document.body.appendChild(aLink);
                    aLink.style.display = 'none';
                    aLink.href = window.URL.createObjectURL(res);
                    aLink.setAttribute('download', `BomReview.xls`);
                    aLink.click();
                    document.body.removeChild(aLink);
                  });
                }}
                type="primary"
              >
                导出
              </Button>, */
            ]}
            request={async (params = {}, sort, filter) => {
              const res = { ...params, changeStatus: 2 };
              const sorters = sortTran(sort);
              const filters = filterTranNew(res);
              const result = await getBomReviewMainByPage({
                ...params,
                sorters: sorters,
                filters: filters,
              });
              // console.log(result);
              result.data.content.map((r) => {
                if (r.versionSecond === null) {
                  r.versionSecond = 0; //如果versionSecond为null，则次版本号赋为0
                }
                return r;
              });
              /* const result = await getBomReviewByPage({ ...params, sorters: sorters, filters: filters }); */
              // console.log(result.data.content);
              return {
                data: result.data.content,
                total: result.data.totalElements,
                success: result.success,
              };
            }}
            columns={columns}
            scroll={{ x: 1000, y: 350 }}
            rowSelection={{}}
          />
          <ProTable
            headerTitle="BOM详情"
            actionRef={actionRef1} //用于触发刷新操作等，看api
            rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
            search={false}
            toolBarRender={(action, { selectedRows }) => [
              <div className="projectScheduleGroup">
                <span>原始：</span>
                <img src="../wks.gif" />
                <span>新增：</span>
                <img src="../zxz.gif" />
                <span>变更：</span>
                <img src="../zt.gif" />
              </div>,
            ]}
            request={async (params = {}, sort, filter) => {
              let result;
              if (reviewMainId) {
                const filters = [
                  {
                    andOr: 'and',
                    field: 'reviewMainId',
                    operator: 'eq',
                    value: reviewMainId,
                  },
                ];
                result = await getBomReviewByPage({
                  ...params,
                  sorters: [],
                  filters: filters,
                });
                result.data.content = ClassifyResult(result.data.content);
              }
              return {
                data: result.data.content,
                total: result.data.totalElements,
                success: result.success,
              };
            }}
            columns={columns1}
            scroll={{ x: 2200, y: 350 }}
          />
        </div>
      ),
    },
    {
      name: 'tab3',
      label: '已驳回',
      content: (
        <div>
          <ProTable
            headerTitle="BOM审批查询"
            actionRef={actionRef} //用于触发刷新操作等，看api
            rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
            formRef={ref}
            // search={{
            //   labelWidth: 100,
            //   defaultCollapsed: true,
            // }}
            search={tableSearchPublicConfig}
            onRow={(record) => ({
              onClick: () => {
                reviewMainId = record.id;
                actionRef1.current!.reload(); //刷新子表
              },
            })}
            toolBarRender={(action, { selectedRows }) => [
              // <Button
              //   key="button"
              //   icon={<PlusOutlined />}
              //   onClick={() => {
              //       setCreateOrUpdate(false);
              //       setFormTitle('新建');
              //       form.resetFields();
              //       setModalVisit(true);
              //   }}
              //   type="primary"
              //   >
              //   新建
              // </Button>,
/*               <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                  const filter_ref = { changeStatus: 3 };
                  const filters = filterTranNew(filter_ref);
                  exportBomReview({
                    current: 1,
                    pageSize: 5000,
                    filters: filters,
                  }).then((res) => {
                    const aLink = document.createElement('a');
                    document.body.appendChild(aLink);
                    aLink.style.display = 'none';
                    aLink.href = window.URL.createObjectURL(res);
                    aLink.setAttribute('download', `BomReview.xls`);
                    aLink.click();
                    document.body.removeChild(aLink);
                  });
                }}
                type="primary"
              >
                导出
              </Button>, */
            ]}
            request={async (params = {}, sort, filter) => {
              const res = { ...params, changeStatus: 3 };
              const sorters = sortTran(sort);
              const filters = filterTranNew(res);
              /*               const result = await getBomReviewByPage({ ...params, sorters: sorters, filters: filters }); */
              // console.log(result.data.content);
              const result = await getBomReviewMainByPage({
                ...params,
                sorters: sorters,
                filters: filters,
              });
              // console.log(result);
              result.data.content.map((r) => {
                if (r.versionSecond === null) {
                  r.versionSecond = 0; //如果versionSecond为null，则次版本号赋为0
                }
                return r;
              });
              return {
                data: result.data.content,
                total: result.data.totalElements,
                success: result.success,
              };
            }}
            columns={columns}
            scroll={{ x: 1000, y: 350 }}
            rowSelection={{}}
          />
          <ProTable
            headerTitle="BOM详情"
            actionRef={actionRef1} //用于触发刷新操作等，看api
            rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
            search={false}
            toolBarRender={(action, { selectedRows }) => [
              <div className="projectScheduleGroup">
                <span>原始：</span>
                <img src="../wks.gif" />
                <span>新增：</span>
                <img src="../zxz.gif" />
                <span>变更：</span>
                <img src="../zt.gif" />
              </div>,
            ]}
            request={async (params = {}, sort, filter) => {
              let result;
              if (reviewMainId) {
                const filters = [
                  {
                    andOr: 'and',
                    field: 'reviewMainId',
                    operator: 'eq',
                    value: reviewMainId,
                  },
                ];
                result = await getBomReviewByPage({
                  ...params,
                  sorters: [],
                  filters: filters,
                });
                result.data.content = ClassifyResult(result.data.content);
              }
              return {
                data: result.data.content,
                total: result.data.totalElements,
                success: result.success,
              };
            }}
            columns={columns1}
            scroll={{ x: 2200, y: 350 }}
          />
        </div>
      ),
    },
  ];

  return (
    <PageHeaderWrapper title={false} breadcrumb={undefined}>
      <Tabs
        destroyInactiveTabPane
        type="card"
        onChange={() => {
          reviewMainId = '';
          actionRef1.current!.reload();
        }}
        items={tabList.map((item, i) => {
          const id = String(i + 1);
          return {
            label:
              i == 0 ? (
                <div className="text">
                  {item.label}
                  <div className="point">
                    <div className="number">{handlenumber}</div>
                  </div>
                </div>
              ) : (
                <div>{item.label}</div>
              ),
            key: id,
            children: <div>{item.content}</div>,
          };
        })}
      />
      <Modal
        title={formTitle}
        visible={modalVisit}
        onOk={handleSubmit}
        confirmLoading={confirmLoading}
        onCancel={() => {
          setModalVisit(false);
          setEditVersion(false);
        }}
        width={600}
        destroyOnClose
      >
        <Form
          name="wrap"
          labelCol={{ flex: '95px' }}
          labelAlign="right"
          labelWrap
          form={form}
          wrapperCol={{ flex: 1 }}
          colon={false}
        >
          <Form.Item label="id" name="id" hidden={true}>
            <Input />
          </Form.Item>
          {/*           <Row gutter={[50, 0]}>
            <Col span={12}>
              <Form.Item
                label="物料编号"
                name="materialCode"
                rules={[{ required: true, message: '请输入物料编号!' }]}
              >
                <Input disabled/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="物料名称"
                name="materialName"
              >
                <Input disabled/>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={12}>
              <Form.Item
                label="物料规格"
                name="materialSpec"
                rules={[{ required: true, message: '请输入物料规格!' }]}
              >
                 <Input disabled/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="物料分类"
                name="materialClassification"
              >
                 <Input disabled/>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={12}>
              <Form.Item
                label="物料种类"
                name="materialType"
              >
                <Input disabled/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="物料品牌"
                name="brand"
              >
                 <Input disabled/>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={12}>
              <Form.Item
                label="BOM数量"
                name="materialQty"
                rules={[{ required: true, message: '请输入BOM数量!' }]}
              >
                <Input disabled/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="物料单位"
                name="unit"
                rules={[{ required: true, message: '请输入物料单位!' }]}
              >
                <Input disabled/>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={12}>
             <Form.Item
                label="位置号"
                name="positionNo"
                rules={[{ required: true, message: '请输入位置号!' }]}
                // hidden={!createOrUpdate}
              >
                 <Input disabled/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="是否甲供料"
                name="isJia"//
              >
                <Select
                  disabled
                  placeholder="请选择是否甲供料"
                  onChange={() => {}}
                  options={[{value:'是', label:'是'},
                  {value:'否', label:'否'}]}
                />
              </Form.Item>
            </Col>
          </Row> */}
          <Row gutter={[50, 0]}>
            <Col span={24}>
              <Form.Item
                label="审核结果"
                name="reviewState"
                rules={[{ required: true, message: '请选择审核结果!' }]}
              >
                <Select
                  disabled={state != '0'}
                  placeholder="请选择审核结果"
                  onChange={(value) => {
                    setTempReviewState(value);
                    if (value === '2') {
                      form.setFieldsValue({
                        version: confirmRecord.version,
                        versionSecond: confirmRecord.versionSecond + 1,
                      });
                    } else if (value === '3') {
                      form.setFieldsValue({
                        version: confirmRecord.version,
                        versionSecond: confirmRecord.versionSecond,
                      });
                    }
                  }}
                  options={[
                    { value: '2', label: '通过' },
                    { value: '3', label: '驳回' },
                  ]}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={24}>
              <Form.Item
                label="审核描述"
                name="reviewMemo"
                rules={[{ required: true, message: '请输入审核描述!' }]}
              >
                <Input disabled={state != '0'} />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[8, 0]}>
            <Col span={12}>
              <Form.Item
                name="version"
                label="版本号"
                rules={[{ required: true, message: '请输入主版本号!' }]}
              >
                <InputNumber
                  min={confirmRecord.version}
                  style={{ width: '100px' }}
                  addonBefore="v"
                  disabled={editVersion === false || tempReviewState != 2}
                  hidden={state != '0'}
                />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                name="versionSecond"
                rules={[{ required: true, message: '请输入次版本号!' }]}
              >
                <InputNumber
                  min={confirmRecord.versionSecond}
                  style={{ width: '100px', position: 'relative', right: '80px' }}
                  addonBefore="."
                  disabled={editVersion === false || tempReviewState != 2}
                  hidden={state != '0'}
                />
              </Form.Item>
            </Col>
            <Col span={2}>
              <Button
                type="link"
                style={{ width: '100px', position: 'relative', right: '120px' }}
                disabled={tempReviewState != 2}
                onClick={() => {
                  setEditVersion(!editVersion);
                  form.setFieldsValue({
                    version: confirmRecord.version,
                    versionSecond: confirmRecord.versionSecond,
                  });
                }}
              >
                {editVersion === false ? '修改版本号' : '取消修改'}
              </Button>
            </Col>
          </Row>
        </Form>
      </Modal>
      <Modal
        title="查看"
        visible={modalVisit2}
        // confirmLoading={confirmLoading}
        onCancel={() => setModalVisit2(false)}
        width={600}
        destroyOnClose
        footer={[
          <Button key="back" onClick={() => setModalVisit2(false)}>
            关闭
          </Button>,
        ]}
      >
        <Form
          name="wrap"
          labelCol={{ flex: '95px' }}
          labelAlign="right"
          labelWrap
          form={form}
          wrapperCol={{ flex: 1 }}
          colon={false}
        >
          <Form.Item label="id" name="id" hidden={true}>
            <Input />
          </Form.Item>
          {/*           <Row gutter={[50, 0]}>
            <Col span={12}>
              <Form.Item
                label="物料编号"
                name="materialCode"
                rules={[{ required: true, message: '请输入物料编号!' }]}
              >
                <Input disabled/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="物料名称"
                name="materialName"
              >
                <Input disabled/>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={12}>
              <Form.Item
                label="物料规格"
                name="materialSpec"
                rules={[{ required: true, message: '请输入物料规格!' }]}
              >
                 <Input disabled/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="物料分类"
                name="materialClassification"
              >
                 <Input disabled/>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={12}>
              <Form.Item
                label="物料种类"
                name="materialType"
              >
                <Input disabled/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="物料品牌"
                name="brand"
              >
                 <Input disabled/>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={12}>
              <Form.Item
                label="BOM数量"
                name="materialQty"
                rules={[{ required: true, message: '请输入BOM数量!' }]}
              >
                <Input disabled/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="物料单位"
                name="unit"
                rules={[{ required: true, message: '请输入物料单位!' }]}
              >
                <Input disabled/>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={12}>
             <Form.Item
                label="位置号"
                name="positionNo"
                rules={[{ required: true, message: '请输入位置号!' }]}
                // hidden={!createOrUpdate}
              >
                 <Input disabled/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="是否甲供料"
                name="isJia"//
              >
                <Select
                  disabled
                  placeholder="请选择是否甲供料"
                  onChange={() => {}}
                  options={[{value:'是', label:'是'},
                  {value:'否', label:'否'}]}
                />
              </Form.Item>
            </Col>
          </Row> */}
          <Row gutter={[50, 0]}>
            <Col span={24}>
              <Form.Item
                label="审核结果"
                name="reviewState"
                rules={[{ required: true, message: '请选择审核结果!' }]}
              >
                <Select
                  disabled={state != '0'}
                  placeholder="请选择审核结果"
                  onChange={() => {}}
                  options={[
                    { value: '2', label: '通过' },
                    { value: '3', label: '驳回' },
                  ]}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={24}>
              <Form.Item
                label="审核描述"
                name="reviewMemo"
                rules={[{ required: true, message: '请输入审核描述!' }]}
              >
                <Input disabled={state != '0'} />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </PageHeaderWrapper>
  );
};
export default BomReview;
